<!--
 * @Author      : ZhouQiJun
 * @Date        : 2019-08-22 19:41:20
 * @LastEditors : ZhouQiJun
 * @LastEditTime: 2025-10-02 18:41:55
 * @Description : 首页
-->
<template>
  <view class="content">
    <TheHeader />
    <view class="text-area">
      <text class="title">{{ title }}</text>
      <text class="title">{{ total }}</text>
    </view>
    <view>
      <text> count {{ count }} </text>
      <up-button type="primary" text="确定" @click="onAdd"></up-button>
      <up-button type="success" text="月落"></up-button>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'

import { onHide, onLoad, onShow } from '@dcloudio/uni-app'

import { TheHeader } from '@/components'
import { useCount } from '@/hooks'
import { sum } from '@/utils'

const total = ref(sum(1, 2, 3, 4, 5))

const { count, add } = useCount(10)
function onAdd() {
  add(2)
}

watch(total, (v) => {
  console.log({ v })
})

setTimeout(() => {
  total.value = 30
}, 1000)

const title = ref('Hello')
onLoad(() => {
  console.log('onLoad in setup')
})
onShow(() => {
  console.log('onShow in setup')
})
onHide(() => {
  console.log('onHide in setup')
})
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
